<!--
 * @Descripttion:
 * @version:
 * @Author: 韩应波
 * @Date: 2021-01-04 15:56:46
 * @LastEditors: 韩应波
 * @LastEditTime: 2021-03-04 09:30:57
-->
<template>
  <div class="banner-container">
    <ScenicScreen v-model="list.filter.scenicId" v-if="isScenic" />
    <AreaTree v-model="list.filter.areaCode" v-if="isArea" />
    <ShopScreen v-model="list.filter.merchantId" v-if="isMch" />
    <div class="app-container">
      <el-form
        ref="listFilterRef"
        :model="list.filter"
        inline
        class="list-filter"
      >
        <el-form-item prop="name">
          <el-input
            v-model="list.filter.name"
            placeholder="Banner名称"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-form-item>
        <!-- 只有positionType不存在时才能筛选 -->
        <el-form-item prop="positionType" v-if="!isSubPage">
          <KiSelect
            v-model="list.filter.positionType"
            :options="bannerPosition"
            placeholder="位置"
            :filterable="false"
          />
        </el-form-item>
        <el-form-item prop="status">
          <Status v-model="list.filter.status" />
        </el-form-item>
        <el-form-item prop="effect">
          <KiSelect
            v-model="list.filter.effect"
            :options="[
              { dataValue: true, dataName: '生效中' },
              { dataValue: false, dataName: '未生效' }
            ]"
            placeholder="是否生效"
            :filterable="false"
          />
        </el-form-item>
        <!-- <el-form-item prop="areaCode" v-if="isArea">
          <RegionSelect
            v-model="list.filter.areaCode"
            :props="{ checkStrictly: true }"
          />
        </el-form-item> -->
        <el-form-item>
          <el-button @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <div class="table-operation">
        <span>
          <AuthButton @click="c" name="新增" />
          <defaultBanner
            v-if="defaultBanner"
            :bannerPosition="bannerPosition"
          />
        </span>
        <el-pagination
          v-bind="elPaginationProps"
          :total="list.total"
          :currentPage.sync="list.filter.pageNo"
          :pageSize.sync="list.filter.pageSize"
        />
      </div>

      <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
        <el-table-column
          label="展示顺序"
          align="center"
          prop="sort"
          width="80"
        />
        <el-table-column label="所属地区" prop="areaNames" v-if="isArea" />
        <el-table-column label="名称" align="center" prop="name" />
        <el-table-column label="图片">
          <template slot-scope="scope">
            <PicViewer :value="scope.row.filePath" tableCell />
          </template>
        </el-table-column>
        <el-table-column label="生效时段" align="center" prop="endTime">
          <template slot-scope="{ row }">
            {{ `${row.startTime}至${row.endTime}` }}
            <Expired :endTime="row.endTime" />
          </template>
        </el-table-column>
        <el-table-column label="位置" align="center" v-if="!isSubPage">
          <template slot-scope="{ row }">
            {{ row.positionType | $value2label(dict['banner_position']) }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="isJump"
          label="跳转类型"
          align="center"
          width="100"
        >
          <template slot-scope="{ row }">
            {{ row.type | $value2label(dict['link_type']) }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="isJump"
          label="跳转项名称"
          align="center"
          prop="sourceName"
        />
        <el-table-column label="启用状态" width="80" align="center">
          <template slot-scope="{ row: { id, status } }">
            <KiPopSwitch
              v-bind="popSwitchProps(status)"
              @change="updateStatus({ id, status: status ^ 1 })"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding">
          <template slot-scope="{ row }">
            <auth-button @click="u({ id: row.id })" name="编辑" />
            <auth-button @click="d({ id: row.id })" name="删除" />
          </template>
        </el-table-column>
      </el-table>

      <KiFormDialog
        :show.sync="form.show"
        :title="formTitle"
        v-model="form.data"
        :submit="submitForm"
        :readonly="form.status === 'r'"
        ref="formRef"
        :loading="form.loading"
        width="1100px"
      >
        <template #el-form>
          <el-form-item label="名称" prop="name" verify>
            <el-input
              v-model="form.data.name"
              placeholder="请输入名称"
              maxlength="30"
              show-word-limit
            />
          </el-form-item>
          <el-form-item
            v-if="!isSubPage"
            label="位置"
            prop="positionType"
            verify
          >
            <KiSelect
              v-model="form.data.positionType"
              :options="bannerPosition"
              @change="
                () => {
                  $set(form.data, 'filePath', null)
                  $set(form.data, 'scenicIdList', null)
                  $set(form.data, 'mchIdList', null)
                  $set(form.data, 'areaCodeList', null)
                  getFixedRatio()
                }
              "
            />
          </el-form-item>
          <el-form-item
            v-show="form.data.positionType"
            label="上传Banner"
            prop="filePath"
            verify
          >
            <Imgpond
              v-model="form.data.filePath"
              :aspectRatio="fixedRatio"
              :count="1"
            />
          </el-form-item>
          <el-form-item label="生效时间" prop="endTime" verify>
            <TimeRangePicker
              type="date-time"
              :start.sync="form.data.startTime"
              :end.sync="form.data.endTime"
            />
          </el-form-item>
          <el-form-item label="展示顺序" prop="sort" verify>
            <Sort v-model="form.data.sort" />
          </el-form-item>
          <el-form-item
            v-if="isScenic"
            label="关联景区"
            prop="scenicIdList"
            verify
          >
            <ScenicSpot v-if="form.show" v-model="form.data.scenicIdList" />
          </el-form-item>
          <el-form-item v-if="isMch" label="绑定店铺" prop="mchIdList" verify>
            <ShopSpot v-if="form.show" v-model="form.data.mchIdList" />
          </el-form-item>
          <!-- 部分位置不需要选择地区 -->
          <el-form-item
            v-if="isArea"
            label="所属地区"
            prop="areaCodeList"
            verify
          >
            <RegionSelect
              v-model="form.data.areaCodeList"
              :level="2"
              :props="{ multiple: true, checkStrictly: true }"
            />
          </el-form-item>
          <el-form-item v-if="isJump" label="跳转页面" prop="sourceId">
            <GlobalSearch
              v-if="form.show"
              v-model="form.data.sourceId"
              :type.sync="form.data.type"
              :sourceId.sync="form.data.sourceId"
              :sourceName.sync="form.data.sourceName"
            />
          </el-form-item>
          <el-form-item v-if="countdown" label="秒杀时间" prop="dateProp1">
            <el-date-picker
              v-model="form.data.dateProp1"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择秒杀时间"
              :picker-options="pickerOptions"
              popper-class="count-down"
            ></el-date-picker>
          </el-form-item>
        </template>
      </KiFormDialog>
    </div>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import ScenicSpot from '@/components/ScenicSpot'
import Expired from '@/components/Expired'
import ScenicScreen from '@/components/ScenicScreen'
import ShopSpot from '@/components/ShopSpot'
import ShopScreen from '@/components/ShopScreen'
import defaultBanner from './defaultBanner'

export default {
  name: 'BannerPage',
  mixins: [pageMixin],
  components: {
    ScenicSpot,
    ScenicScreen,
    ShopSpot,
    Expired,
    defaultBanner,
    ShopScreen
  },
  props: {
    // banner类型，支持配置一个或者多个
    positionType: {
      type: [String, Array],
      default: ''
    },
    countdown: {
      type: Boolean,
      default: false
    },
    // 是否需要绑定区域
    isArea: {
      type: Boolean,
      default: true
    },
    // 是否需要绑定景区
    isScenic: {
      type: Boolean,
      default: false
    },
    // 是否需要绑定店铺
    isMch: {
      type: Boolean,
      default: false
    },
    // 是否需要绑定全局跳转
    isJump: {
      type: Boolean,
      default: true
    },
    defaultBanner: {
      type: Boolean,
      default: false
    }
  },
  created () {
    // 查询传入的positionType是否有效
    if (this.positionType && this.dict?.banner_position) {
      this.dict.banner_position.forEach(item => {
        if (Array.isArray(this.positionType)) {
          // 传入多个可选banner
          this.positionType.forEach(item2 => {
            if (item2 == item.dataValue) {
              this.bannerPosition.push(item)
              this.list.filter.positionTypeList.push(item2)
            }
          })
        } else {
          // 传入单个可选banner
          if (this.positionType == item.dataValue) {
            this.isSubPage = true
            this.list.filter.positionType = this.positionType
            this.bannerPosition = [item]
          }
        }
      })
    } else {
      // 没有传入单独的banner选项，选择全部
      this.bannerPosition = this.dict.banner_position
    }
    this.getList()
  },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'one-travel-api/banner',
      list: {
        filter: {
          positionType: '',
          positionTypeList: [],
          effect: '',
          name: '',
          status: ''
        }
      },
      form: {
        data: {
          type: '00',
          __page: {},
          startTime: '',
          areaCodeList: undefined
        }
      }
    }, {
      afterRetrieve() {
        if (this.form.data.dictAreaEntityList) {
          this.form.data.areaCodeList = this.form.data.dictAreaEntityList.map(
            item => item.code
          )
        }
      },
      // 等 list.filter.positionType 或 list.filter.positionTypeList 处理完了再调用
      getListInitially: false,
    }),
  data () {
    return {
      // 是否子界面，只能查询和管理某一个类别的banner
      isSubPage: false,
      bannerPosition: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 3600 * 24 * 1000
        }
      },
      fixedRatio: ''
    }
  },
  watch: {
    'form.show' (n) {
      if (n && this.isSubPage) {
        // 设置为传入的positionType
        this.form.data.positionType = this.list.filter.positionType
        this.getFixedRatio()
      }
    }
  },
  methods: {
    getFixedRatio () {
      let positionType = this.form.data.positionType
      if (positionType) {
        this.fixedRatio = this.dict.banner_position.filter(v => {
          if (v.dataValue == positionType) {
            return v
          }
        })[0]?.remark ?? undefined
      }
    }
  }
}
</script>

<style lang="scss">
.count-down {
  .el-button--text {
    display: none !important;
  }
}
.banner-container {
  display: flex;
  .app-container {
    flex: 1;
    width: 0;
  }
}
</style>
